<template>
  <div class="app">
    <dv-full-screen-container>
      <div class="warrper">
        <div class="head">
          <div class="title">
            <img
              src="./assets/logo.png"
              style="padding-right:1rem;height: 4vh;"
            />{{ title }}
          </div>
          <div class="time">
            <span>{{ time }}</span>
          </div>
          <div class="head-right">
            <!-- <a-select v-model="cx" @change="changeCx">
              <a-select-option
                v-for="(item, index) in cxList"
                :key="index"
                :value="item.cx"
              >
                {{ item.cxname }}
              </a-select-option>
            </a-select> -->
            <span> {{ cxname }}</span>
          </div>
        </div>
        <!-- <to-head :title="title" /> -->
        <div class="content-bnr">
          <a-row :gutter="8" style="height:100%">
            <!-- 当日品种完工数-->
            <a-col :span="8" style="height:100%"
              ><dv-border-box-12
                class="border11"
                :color="['#122794', '#68d8fe']"
              >
                <left-2 :con1="con1"> </left-2>
              </dv-border-box-12>
            </a-col>
            <a-col :span="4" style="height:100%">
              <num :dataV="sumDayNum"></num>
            </a-col>
            <a-col :span="4" style="height:100%">
              <div class="box-border">
                <div class="tit">产量</div>
                <div style="height:100%">
                  <div class="cl mb">
                    <span>目标</span>
                    <div>
                      <p class="large">{{ clData.mb1 ? clData.mb1 : '/' }}</p>
                      <p class="small">早班</p>
                    </div>
                    <div>
                      <p class="large">{{ clData.mb2 ? clData.mb2 : '/' }}</p>
                      <p class="small">晚班</p>
                    </div>
                  </div>
                  <div class="cl sj">
                    <span>实际</span>
                    <div>
                      <p class="large">{{ clData.sj1 ? clData.sj1 : '/' }}</p>
                      <p class="small">早班</p>
                    </div>
                    <div>
                      <p class="large">{{ clData.sj2 ? clData.sj2 : '/' }}</p>
                      <p class="small">晚班</p>
                    </div>
                  </div>
                </div>
              </div>
            </a-col>
            <a-col :span="4" style="height:100%">
              <div class="box-border">
                <div class="tit">完成率</div>
                <div style="height:100%">
                  <div class="cl mb">
                    <span>目标</span>
                    <div>
                      <p class="large">
                        {{ xlData.mb1 ? xlData.mb1 : '/' }}<span>%</span>
                      </p>
                      <p class="small">早班</p>
                    </div>
                    <div>
                      <p class="large">
                        {{ xlData.mb2 ? xlData.mb2 : '/' }}<span>%</span>
                      </p>
                      <p class="small">晚班</p>
                    </div>
                  </div>
                  <div class="cl sj">
                    <span>实际</span>
                    <div>
                      <p class="large">
                        {{ xlData.sj1 ? xlData.sj1 : '/' }}<span>%</span>
                      </p>
                      <p class="small">早班</p>
                    </div>
                    <div>
                      <p class="large">
                        {{ xlData.sj2 ? xlData.sj2 : '/' }}<span>%</span>
                      </p>
                      <p class="small">晚班</p>
                    </div>
                  </div>
                </div>
              </div>
            </a-col>
            <a-col :span="4" style="height:100%">
              <div class="box-border">
                <!-- <dv-border-box-12
                class="border11"
                :color="['#1b2659', '#68d8fe']"
              > -->
                <div class="tit">一次合格率</div>
                <div style="height:100%">
                  <div class="cl mb">
                    <span>目标</span>
                    <div>
                      <p class="large">
                        {{ hglData.mb1 ? hglData.mb1 : '/' }}<span>%</span>
                      </p>
                      <p class="small">早班</p>
                    </div>
                    <div>
                      <p class="large">
                        {{ hglData.mb2 ? hglData.mb2 : '/' }}<span>%</span>
                      </p>
                      <p class="small">晚班</p>
                    </div>
                  </div>
                  <div class="cl sj">
                    <span>实际</span>
                    <div>
                      <p class="large">
                        {{ hglData.sj1 ? hglData.sj1 : '/' }}<span>%</span>
                      </p>
                      <p class="small">早班</p>
                    </div>
                    <div>
                      <p class="large">
                        {{ hglData.sj2 ? hglData.sj2 : '/' }}<span>%</span>
                      </p>
                      <p class="small">晚班</p>
                    </div>
                  </div>
                </div>
              </div>
            </a-col>
          </a-row>
        </div>
        <div class="bottom-bnr">
          <a-row :gutter="8" style="height:100%">
            <a-col :span="12" style="height:100%">
              <dv-border-box-11
                class="border11"
                title="车间实时生产统计"
                :color="['#122794', 'rgba(18, 39,148, 0.3)']"
              >
                <table-list
                  :headerList="reportFourHeader"
                  :dataList="reportFourDataList"
                  :columnWidth="columnWidth1"
                ></table-list>
              </dv-border-box-11>
            </a-col>
            <a-col :span="4" style="height:100%">
              <div class="box-border2">
                <div class="tit">人员上工信息</div>
                <table-list-2
                  :headerList="personHeader"
                  :dataList="personDataList"
                  :columnWidth="columnWidth2"
                ></table-list-2>
              </div>
            </a-col>
            <a-col :span="8" style="height:100%">
              <div class="box-border2">
                <div class="tit">设备状态</div>
                <table-list-2
                  :headerList="eqHeader"
                  :dataList="eqDataList"
                  :columnWidth="columnWidth3"
                ></table-list-2></div
            ></a-col>
          </a-row>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import { bnrQuery } from './api/dataApi'
import Left2 from './components/cx/ConLeftLine.vue'
import TableList from './components/cx/TableList.vue'
import Num from './components/cx/Num.vue'
import TableList2 from './components/cx/TableList2.vue'
export default {
  name: 'App',
  components: {
    Left2,
    TableList,
    Num,
    TableList2,
  },
  data() {
    return {
      indexInv: 0,
      title: '产线生产大屏',
      sumDayNum: [], //中间数据
      con1: [], //产线实时数据统计
      lpRate: 0,
      cx: 'A01',
      dateList: [],
      clData: {},
      xlData: {},
      cxname: '',
      hglData: {},
      countyCheckData: [],
      reportTwoData: [],
      reportFourHeader: [
        '订单号',
        '行号',
        '物料编号',
        '物料名称',
        // '物料代号',
        '订单数',
        '工序进度',
        // '完成率',
        // '入库数量',
      ],

      reportFourDataList: [],
      personHeader: ['工位', '人员'],
      personDataList: [],
      eqHeader: ['编码', '名称', '时间', '类型', '工时'],
      eqDataList: [],
      columnWidth1: [150, 130, 150, 260, 100],
      columnWidth2: [],
      columnWidth3: [120, 130, 200, 120, 100],
      eqData: [],
      cxList: [],
      timeover: null,
      reprotEqNum: {
        runningNum: 0,
        normalNum: 0,
        disabledNum: 0,
      },
    }
  },
  props: {
    time: {
      type: String,
      default: '',
    },
  },
  watch: {
    clData: {
      handler(newData) {
        if (!newData) {
          this.$forceUpdate()
        }
      },
      // immediate: true,
      deep: true,
    },
  },
  destroyed() {
    clearInterval(this.timeover)
  },
  created() {
    this.getCxData()
    console.log('this.$route.query.cx', this.$route.query.cx)
    // let cx = this.cx
    let cx = this.$route.query.cx
    this.getData(cx) //当日品种完工数
    this.getData2(cx) // 中间数据
    this.getTabelData(cx) // 车间实时生产统计
    this.getTabelData2(cx) // 人员上工信息
    this.getTabelData3(cx) // 设备状态
    this.getclData(cx) // 产量
    this.getxlData(cx) // 完成率
    this.gethglData(cx) // 合格率
  },
  mounted() {
    let cx = this.$route.query.cx
    if (this.timeover) {
      clearInterval(this.timeover)
    }
    this.timeover = setInterval(() => {
      this.getData(cx)
      this.getData2(cx)
      this.getTabelData(cx)
      this.getTabelData2(cx)
      this.getTabelData3(cx)
      this.getclData(cx)
      this.getxlData(cx)
      this.gethglData(cx)
    }, 1000 * 60 * 10)
    // this.time = moment().format('YYYY-MM-DD')
    // // 定时刷新时间
    // this.timer = setInterval(() => {
    //   this.time = moment().format('YYYY-MM-DD')
    // }, 1000)
    // let cx = this.$route.query.cx
  },
  methods: {
    //当日品种完工数
    getData(cx) {
      const that = this
      // queryProdChart({ begintime: '2022-08-01', endtime: '2022-08-01' })
      const header = {}
      header['report.tableid'] = 'bne_workshop_prod_chart01'
      header['cx'] = cx
      const params = {
        _params: JSON.stringify(header),
        _conditions: {},
        pageIndex: -1,
        // sortField: 'id',
        // sortOrder: 'desc',
      }
      bnrQuery(params)
        .then((res) => {
          if (res.data && res.data.length > 0) {
            that.con1 = res.data
            // that.lpRate = res.data.sumDayNum.completerate
          } else {
            that.con1 = []
          }
        })
        .catch(() => {
          that.$message.error('数据请求失败，请联系管理员！')
        })
    },
    // 中间数据
    getData2(cx) {
      const that = this
      // queryProdChart({ begintime: '2022-08-01', endtime: '2022-08-01' })
      const header = {}
      header['report.tableid'] = 'bne_workshop_prod_chart05'
      header['cx'] = cx
      const params = {
        _params: JSON.stringify(header),
        _conditions: {},
        pageSize: 0,
        pageIndex: -1,
        // sortField: 'id',
        // sortOrder: 'desc',
      }
      bnrQuery(params)
        .then((res) => {
          if (res.data && res.data.length > 0) {
            that.sumDayNum = res.data
          } else {
            that.sumDayNum = []
          }
        })
        .catch(() => {
          that.$message.error('数据请求失败，请联系管理员！')
        })
    },
    // 产量
    getclData(cx) {
      const that = this
      // queryProdChart({ begintime: '2022-08-01', endtime: '2022-08-01' })
      const header = {}
      header['report.tableid'] = 'bne_workshop_prod_chart06'
      header['cx'] = cx
      const params = {
        _params: JSON.stringify(header),
        _conditions: {},
        pageSize: 0,
        pageIndex: -1,
        // sortField: 'id',
        // sortOrder: 'desc',
      }
      bnrQuery(params)
        .then((res) => {
          if (res.data && res.data.length > 0) {
            that.clData = res.data[0]
          } else {
            that.clData = {}
          }
        })
        .catch(() => {
          that.$message.error('数据请求失败，请联系管理员！')
        })
    },
    // 完成率
    getxlData(cx) {
      const that = this
      // queryProdChart({ begintime: '2022-08-01', endtime: '2022-08-01' })
      const header = {}
      header['report.tableid'] = 'bne_workshop_prod_chart07'
      header['cx'] = cx
      const params = {
        _params: JSON.stringify(header),
        _conditions: {},
        pageSize: 0,
        pageIndex: -1,
        // sortField: 'id',
        // sortOrder: 'desc',
      }
      bnrQuery(params)
        .then((res) => {
          if (res.data && res.data.length > 0) {
            that.xlData = res.data[0]
          } else {
            that.xlData = {}
          }
        })
        .catch(() => {
          that.$message.error('数据请求失败，请联系管理员！')
        })
    },
    // 一次合格率
    gethglData(cx) {
      const that = this
      // queryProdChart({ begintime: '2022-08-01', endtime: '2022-08-01' })
      const header = {}
      header['report.tableid'] = 'bne_workshop_prod_chart08'
      header['cx'] = cx
      const params = {
        _params: JSON.stringify(header),
        _conditions: {},
        pageSize: 0,
        pageIndex: -1,
        // sortField: 'id',
        // sortOrder: 'desc',
      }
      bnrQuery(params)
        .then((res) => {
          if (res.data && res.data.length > 0) {
            that.hglData = res.data[0]
          } else {
            that.hglData = {}
          }
        })
        .catch(() => {
          that.$message.error('数据请求失败，请联系管理员！')
        })
    },
    // 车间实时生产统计
    getTabelData(cx) {
      const that = this
      const header = {}
      header['report.tableid'] = 'bne_workshop_prod_chart02'
      header['cx'] = cx
      const params = {
        _params: JSON.stringify(header),
        _conditions: {},
        pageSize: 0,
        pageIndex: -1,
        // sortField: 'id',
        // sortOrder: 'desc',
      }
      bnrQuery(params)
        .then((res) => {
          if (res.data && res.data.length > 0) {
            that.qOne(res.data)
          } else {
            that.reportFourDataList = []
          }
        })
        .catch(() => {
          that.$message.error('数据请求失败，请联系管理员！')
        })
    },
    qOne(reportData) {
      const _reportData = []
      reportData.forEach((reportItem) => {
        const _m = []
        _m.push(reportItem.mocode)
        _m.push(reportItem.sortseq)
        _m.push(reportItem.invcode)
        _m.push(reportItem.invname)
        // _m.push(reportItem.invaddcode)
        _m.push(reportItem.qty)
        _m.push(reportItem.op_name)
        // _m.push(reportItem.completerate)
        // _m.push(reportItem.qualifiedqtysum)
        _reportData.push(_m)
      })
      this.reportFourDataList = _reportData
    },
    // 人员上工信息
    getTabelData2(cx) {
      const that = this
      const header = {}
      header['report.tableid'] = 'bne_workshop_prod_chart03'
      header['cx'] = cx
      const params = {
        _params: JSON.stringify(header),
        _conditions: {},
        pageSize: 0,
        pageIndex: -1,
      }
      bnrQuery(params)
        .then((res) => {
          if (res.data && res.data.length > 0) {
            that.qTwo(res.data)
          } else {
            that.personDataList = []
          }
        })
        .catch(() => {
          that.$message.error('数据请求失败，请联系管理员！')
        })
    },
    qTwo(reportData) {
      const _reportData = []
      reportData.forEach((reportItem) => {
        const _m = []
        _m.push(reportItem.wsname)
        _m.push(reportItem.psname)
        // _m.push(reportItem.starttime)
        // _m.push(reportItem.endtime)
        _reportData.push(_m)
      })
      this.personDataList = _reportData
    },
    // 设备状态
    getTabelData3(cx) {
      const that = this
      const header = {}
      header['report.tableid'] = 'bne_workshop_prod_chart04'
      header['cx'] = cx
      const params = {
        _params: JSON.stringify(header),
        _conditions: {},
        pageSize: 0,
        pageIndex: -1,
        // sortField: 'id',
        // sortOrder: 'desc',
      }
      bnrQuery(params)
        .then((res) => {
          if (res.data && res.data.length > 0) {
            that.qThree(res.data)
          } else {
            this.eqDataList = []
          }
        })
        .catch(() => {
          that.$message.error('数据请求失败，请联系管理员！')
        })
    },
    qThree(reportData) {
      const _reportData = []
      reportData.forEach((reportItem) => {
        const _m = []
        _m.push(reportItem.devicecode)
        _m.push(reportItem.devicename)
        _m.push(reportItem.time)
        _m.push(reportItem.reasonname)
        _m.push(reportItem.workhour)
        _reportData.push(_m)
      })
      this.eqDataList = _reportData
    },
    changeCx(e) {
      this.cx = e
      this.getData(e)
      this.getData2(e)
      this.getTabelData(e)
      this.getTabelData2(e)
      this.getTabelData3(e)
      this.getclData(e)
      this.getxlData(e)
      this.gethglData(e)
      // this.$forceUpdate()
    },
    getCxData() {
      const that = this
      const header = {}
      header['report.tableid'] = 'bne_prod_chart_prodline'
      const params = {
        _params: JSON.stringify(header),
        _conditions: {},
        pageSize: 0,
        pageIndex: -1,
      }
      bnrQuery(params)
        .then((res) => {
          if (res.data && res.data.length > 0) {
            that.cxList = res.data
            that.cx = res.data[0].cx
            // that.cxname = res.data[0].cxname
            this.getData(that.cx)
            this.getData2(that.cx)
            this.getTabelData(that.cx)
            this.getTabelData2(that.cx)
            this.getTabelData3(that.cx)
            this.getclData(that.cx)
            this.getxlData(that.cx)
            this.gethglData(that.cx)
          }
        })
        .catch(() => {
          that.$message.error('数据请求失败，请联系管理员！')
        })
    },
  },
}
</script>

<style lang="less" scoped>
.app {
  font-family: 'MicrosoftYaHei', Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #fff;
  box-sizing: border-box;
  /* margin-top: 60px; */
}

.tit {
  .px2font(19);
  // .px2vh(padding-top, 5);
  // .px2vw(padding-left, 15);
  // .px2vh(padding-bottom, 8);
  letter-spacing: 2px;
  color: #fff;
  text-align: center;
  height: 4vh;
  line-height: 4vh;
  // border-bottom: 1px solid transparent;
  // border-radius: 4px;
  // background-clip: padding-box, border-box;
  // background-origin: padding-box, border-box;
  // background-image: linear-gradient(
  //     to right,
  //     rgba(0, 0, 0, 0.1),
  //     rgba(0, 0, 0, 0.1)
  //   ),
  //   linear-gradient(90deg, #8f41e9, #578aef);
  // border-right: 2px solid;
  // /*设置线性渐变*/
  // border-image: linear-gradient(
  //     180deg,
  //     rgba(255, 255, 255, 0) 0%,
  //     #00bbf2 20%,
  //     rgba(255, 255, 255, 0) 99%
  //   )
  //   2 2 2 2;
  //
  background: linear-gradient(to right, #8f41e9, #578aef);
  // background: linear-gradient(
  //   to right,
  //   rgba(21, 60, 160, 0.05),
  //   rgba(29, 62, 208, 0.3) 50%,
  //   rgba(21, 60, 160, 0.05)
  // );
}
.box-left {
  display: block;
  width: 40px !important;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgb(21, 60, 160);
}
.mb {
  color: #33ccff;
  background: rgba(21, 60, 160, 0.1);
}
.sj {
  color: #39fb9e;
  background: rgba(21, 60, 160, 0.2);
}
.large {
  .px2font(30);
  margin-bottom: 2px;
  span {
    .px2font(16);
    padding-left: 2px;
  }
}
.small {
  .px2font(16);
}

.cl {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 43%;
  span {
    width: 20%;
    .px2font(16);
  }
  div {
    width: 40%;
  }
  .box-tit {
    .px2font(14);
    color: #33ccff;
  }
}

.warrper {
  padding-left: 10px;
  padding-right: 10px;
}

.content-bnr {
  height: 29vh;
  margin-top: 1.5vh;
}
.bottom-bnr {
  height: 58vh;
  margin-top: 3vh;
}
.head {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  flex-shrink: 0;
  width: 100%;
  height: 8vh;
  background: url(./assets/header_bj.png) no-repeat;
  background-size: 100% 100%;
}
.left {
  flex: 20%;
  font-size: 1.7rem;
}
.title {
  flex: 60%;
  .px2font(26);
  color: #fff;
  padding-top: 6px;
  background-image: -webkit-linear-gradient(bottom, #1e91fc, #1efcf9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.time {
  position: absolute;
  left: 0;
  width: 30vw;
  .px2vh(top, 40);
  .px2font(20);
  color: #ddd;
}
.head-right {
  position: absolute;
  right: 0;
  width: 30vw;
  .px2vh(top, 40);
  .px2font(20);
  color: #fff;
  .ant-select {
    width: 10vw;
  }
}
.logoy {
  /* width: 2.4rem;
  height: 1rem;
  opacity: 0.8; */

  position: absolute;
  right: 2vw;
  opacity: 0.7;
  top: 89.5vh;
  z-index: 99999;
}
.logoy img {
  height: 2rem;
  z-index: 99999;
}
// .warrper ::v-deep .dv-scroll-board .rows .ceil {
//   .px2font(12) !important;
//   color: #eee;
// }

// .warrper ::v-deep .dv-scroll-board .header .header-item {
//   .px2font(16) !important;
// }
</style>
